<template>
  <div class="company">
<div class="bg-dark text-white font-sans">
    <!-- 进度条 -->
    <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
        <div class="progress-line" id="progress-line"></div>
    </div>

    <!-- Hero区域 -->
    <section class="relative pt-24 pb-16 bg-darker overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-darker to-dark opacity-50"></div>

        <!-- 装饰元素 -->
        <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-secondary/10 rounded-full blur-3xl"></div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                    狂速科技SAAS<span class="text-primary">新闻动态</span>
                </h1>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    了解狂速科技SAAS的最新动态、产品更新和行业资讯
                </p>
            </div>
        </div>
    </section>

    <!-- 新闻列表 -->
    <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row gap-8">
                <!-- 新闻内容区 -->
                <div class="md:w-3/4">
                    <!-- 新闻筛选 -->
                    <div class="flex flex-wrap gap-4 mb-12">
                        <button class="px-6 py-2 bg-primary rounded-full text-sm font-medium">全部</button>
                        <button class="px-6 py-2 bg-card hover:bg-primary/20 rounded-full text-sm font-medium transition-colors">公司动态</button>
                        <button class="px-6 py-2 bg-card hover:bg-primary/20 rounded-full text-sm font-medium transition-colors">产品更新</button>
                        <button class="px-6 py-2 bg-card hover:bg-primary/20 rounded-full text-sm font-medium transition-colors">行业资讯</button>
                        <button class="px-6 py-2 bg-card hover:bg-primary/20 rounded-full text-sm font-medium transition-colors">活动预告</button>
                    </div>

                    <!-- 新闻列表 -->
                    <div class="space-y-12">
                        <!-- 新闻项1 -->
                        <div class="bg-card rounded-xl overflow-hidden hover-lift">
                            <div class="md:flex">
                                <div class="md:w-1/3">
                                    <img src="https://picsum.photos/600/400?random=101" alt="狂速科技SAAS与XX科技达成战略合作" class="w-full h-48 md:h-full object-cover">
                                </div>
                                <div class="p-6 md:p-8 md:w-2/3">
                                    <div class="flex items-center mb-4">
                                        <span class="text-primary text-sm font-medium">公司动态</span>
                                        <span class="mx-2 text-gray-500">|</span>
                                        <span class="text-gray-400 text-sm">2023-05-10</span>
                                    </div>
                                    <h3 class="text-xl md:text-2xl font-bold mb-4">狂速科技SAAS与XX科技达成战略合作，共同推动中小企业数字化转型</h3>
                                    <p class="text-gray-400 mb-6 line-clamp-3">
                                        狂速科技SAAS今日宣布与国内领先的云计算服务商XX科技达成战略合作，双方将整合资源，共同为中小企业提供更加全面、高效的数字化转型解决方案。此次合作将结合狂速科技SAAS在小程序开发领域的技术优势和XX科技的云计算基础设施能力，为客户提供一站式的数字化服务。
                                    </p>
                                    <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                                        阅读更多 <i class="fa fa-arrow-right ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 新闻项2 -->
                        <div class="bg-card rounded-xl overflow-hidden hover-lift">
                            <div class="md:flex">
                                <div class="md:w-1/3">
                                    <img src="https://picsum.photos/600/400?random=102" alt="狂速科技SAAS推出全新智能客服系统" class="w-full h-48 md:h-full object-cover">
                                </div>
                                <div class="p-6 md:p-8 md:w-2/3">
                                    <div class="flex items-center mb-4">
                                        <span class="text-primary text-sm font-medium">产品更新</span>
                                        <span class="mx-2 text-gray-500">|</span>
                                        <span class="text-gray-400 text-sm">2023-04-22</span>
                                    </div>
                                    <h3 class="text-xl md:text-2xl font-bold mb-4">狂速科技SAAS推出全新智能客服系统，提升企业客户服务效率</h3>
                                    <p class="text-gray-400 mb-6 line-clamp-3">
                                        狂速科技SAAS今日正式发布全新智能客服系统，该系统集成了AI聊天机器人、智能工单管理、数据分析等功能，能够帮助企业快速响应客户咨询，提高客户满意度。新系统支持多渠道接入，包括小程序、公众号、网站等，为企业提供统一的客户服务平台。
                                    </p>
                                    <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                                        阅读更多 <i class="fa fa-arrow-right ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 新闻项3 -->
                        <div class="bg-card rounded-xl overflow-hidden hover-lift">
                            <div class="md:flex">
                                <div class="md:w-1/3">
                                    <img src="https://picsum.photos/600/400?random=103" alt="2023中小企业数字化转型高峰论坛" class="w-full h-48 md:h-full object-cover">
                                </div>
                                <div class="p-6 md:p-8 md:w-2/3">
                                    <div class="flex items-center mb-4">
                                        <span class="text-primary text-sm font-medium">活动预告</span>
                                        <span class="mx-2 text-gray-500">|</span>
                                        <span class="text-gray-400 text-sm">2023-04-05</span>
                                    </div>
                                    <h3 class="text-xl md:text-2xl font-bold mb-4">狂速科技SAAS将参加2023中小企业数字化转型高峰论坛并发表主题演讲</h3>
                                    <p class="text-gray-400 mb-6 line-clamp-3">
                                        由中国中小企业协会举办的"2023中小企业数字化转型高峰论坛"将于5月15日在北京举行。狂速科技SAAS作为特邀嘉宾将参加此次论坛，并由CEO张明发表题为"SAAS赋能中小企业数字化转型"的主题演讲。狂速科技SAAS还将在论坛现场展示最新的产品和解决方案。
                                    </p>
                                    <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                                        阅读更多 <i class="fa fa-arrow-right ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 新闻项4 -->
                        <div class="bg-card rounded-xl overflow-hidden hover-lift">
                            <div class="md:flex">
                                <div class="md:w-1/3">
                                    <img src="https://picsum.photos/600/400?random=104" alt="小程序行业发展趋势分析" class="w-full h-48 md:h-full object-cover">
                                </div>
                                <div class="p-6 md:p-8 md:w-2/3">
                                    <div class="flex items-center mb-4">
                                        <span class="text-primary text-sm font-medium">行业资讯</span>
                                        <span class="mx-2 text-gray-500">|</span>
                                        <span class="text-gray-400 text-sm">2023-03-18</span>
                                    </div>
                                    <h3 class="text-xl md:text-2xl font-bold mb-4">狂速科技SAAS发布《2023年小程序行业发展趋势分析报告》</h3>
                                    <p class="text-gray-400 mb-6 line-clamp-3">
                                        狂速科技SAAS今日发布《2023年小程序行业发展趋势分析报告》，对当前小程序市场的发展现状、用户行为、技术趋势等进行了深入分析。报告指出，随着移动互联网的普及和用户对便捷服务的需求增加，小程序市场将继续保持快速增长态势，同时也面临着功能同质化、用户获取成本上升等挑战。
                                    </p>
                                    <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                                        阅读更多 <i class="fa fa-arrow-right ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 新闻项5 -->
                        <div class="bg-card rounded-xl overflow-hidden hover-lift">
                            <div class="md:flex">
                                <div class="md:w-1/3">
                                    <img src="https://picsum.photos/600/400?random=105" alt="狂速科技SAAS荣获最佳SAAS服务提供商" class="w-full h-48 md:h-full object-cover">
                                </div>
                                <div class="p-6 md:p-8 md:w-2/3">
                                    <div class="flex items-center mb-4">
                                        <span class="text-primary text-sm font-medium">公司动态</span>
                                        <span class="mx-2 text-gray-500">|</span>
                                        <span class="text-gray-400 text-sm">2023-02-25</span>
                                    </div>
                                    <h3 class="text-xl md:text-2xl font-bold mb-4">狂速科技SAAS荣获"2022年度最佳SAAS服务提供商"称号</h3>
                                    <p class="text-gray-400 mb-6 line-clamp-3">
                                        在由中国软件协会举办的"2022中国软件和信息服务行业年度颁奖盛典"上，狂速科技SAAS凭借其在小程序SAAS领域的创新产品和优质服务，荣获"2022年度最佳SAAS服务提供商"称号。这是狂速科技SAAS连续第二年获得该奖项，体现了行业对公司技术实力和市场表现的认可。
                                    </p>
                                    <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                                        阅读更多 <i class="fa fa-arrow-right ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="mt-16 flex justify-center">
                        <div class="flex space-x-2">
                            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-card hover:bg-primary transition-colors">
                                <i class="fa fa-angle-left"></i>
                            </a>
                            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary">1</a>
                            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-card hover:bg-primary transition-colors">2</a>
                            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-card hover:bg-primary transition-colors">3</a>
                            <span class="w-10 h-10 flex items-center justify-center">...</span>
                            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-card hover:bg-primary transition-colors">10</a>
                            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-card hover:bg-primary transition-colors">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 侧边栏 -->
                <div class="md:w-1/4">
                    <!-- 搜索框 -->
                    <div class="bg-card rounded-xl p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">搜索新闻</h3>
                        <div class="relative">
                            <input type="text" placeholder="搜索新闻关键词..." class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 pr-10 focus:outline-none focus:border-primary">
                            <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 热门新闻 -->
                    <div class="bg-card rounded-xl p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">热门新闻</h3>
                        <div class="space-y-4">
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/100/100?random=111" alt="热门新闻缩略图" class="w-16 h-16 rounded-lg object-cover mr-4">
                                <div>
                                    <h4 class="font-medium group-hover:text-primary transition-colors line-clamp-2">狂速科技SAAS与XX科技达成战略合作，共同推动中小企业数字化转型</h4>
                                    <p class="text-gray-400 text-sm mt-1">2023-05-10</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/100/100?random=112" alt="热门新闻缩略图" class="w-16 h-16 rounded-lg object-cover mr-4">
                                <div>
                                    <h4 class="font-medium group-hover:text-primary transition-colors line-clamp-2">狂速科技SAAS推出全新智能客服系统，提升企业客户服务效率</h4>
                                    <p class="text-gray-400 text-sm mt-1">2023-04-22</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/100/100?random=113" alt="热门新闻缩略图" class="w-16 h-16 rounded-lg object-cover mr-4">
                                <div>
                                    <h4 class="font-medium group-hover:text-primary transition-colors line-clamp-2">狂速科技SAAS将参加2023中小企业数字化转型高峰论坛并发表主题演讲</h4>
                                    <p class="text-gray-400 text-sm mt-1">2023-04-05</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/100/100?random=114" alt="热门新闻缩略图" class="w-16 h-16 rounded-lg object-cover mr-4">
                                <div>
                                    <h4 class="font-medium group-hover:text-primary transition-colors line-clamp-2">狂速科技SAAS发布《2023年小程序行业发展趋势分析报告》</h4>
                                    <p class="text-gray-400 text-sm mt-1">2023-03-18</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/100/100?random=115" alt="热门新闻缩略图" class="w-16 h-16 rounded-lg object-cover mr-4">
                                <div>
                                    <h4 class="font-medium group-hover:text-primary transition-colors line-clamp-2">狂速科技SAAS荣获"2022年度最佳SAAS服务提供商"称号</h4>
                                    <p class="text-gray-400 text-sm mt-1">2023-02-25</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- 新闻归档 -->
                    <div class="bg-card rounded-xl p-6">
                        <h3 class="text-lg font-bold mb-4">新闻归档</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="#" class="flex justify-between items-center text-gray-400 hover:text-primary transition-colors">
                                    2023年5月 <span>(5)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex justify-between items-center text-gray-400 hover:text-primary transition-colors">
                                    2023年4月 <span>(3)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex justify-between items-center text-gray-400 hover:text-primary transition-colors">
                                    2023年3月 <span>(2)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex justify-between items-center text-gray-400 hover:text-primary transition-colors">
                                    2023年2月 <span>(1)</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
  </div>
</template>

<script>
// 原文件第10 - 25行的 Tailwind 配置
const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        primary: '#48b6ff',
        secondary: '#2e6cf1',
        dark: '#080812',
        darker: '#04040a',
        card: '#1a1a31'
      },
      fontFamily: {
        sans: ['Segoe UI', 'sans-serif'],
      },
    }
  }
};

// 初始化 Tailwind 配置
if (typeof window !== 'undefined' && window.tailwind) {
  window.tailwind.config = tailwindConfig;
}
export default {
  name: "CompanView",
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0
    };
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgressBar() {
      const winScroll = window.pageYOffset;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.updateProgressBar);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updateProgressBar);
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }
  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
}
</style>
